<!--
@license
Copyright 2016 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="tf-audio-loader.html">
<link rel="import" href="../tf-imports/lodash.html">
<link rel="import" href="../tf-dashboard-common/scrollbar-style.html">

<!--
tf-audio-grid creates a grid for examining audio data. The columns correspond
to runs and the rows correspond to tags. Each cell is an audio clip.

Structurally, it makes extensive use of flexbox for layout: it has a top-level
columnar flexbox that contains the topRow (run names) and then a
bottomContainer. The bottomContainer is another columnar flexbox which contains
repeated audio-rows. Each audio-row is a row flexbox which contains a tag name
cell, and then audio cells.

In the future, we should improve on the layout by making the tag names and run names have fixed positions
within the audio-grid, so that when you scroll you always have context (e.g. row and column names in a spreadsheet).
For now, it just scrolls.

The audio grid provides internal scroll bars (with styling) so that it can be dropped into
a dashboard in a predictable fashion, even though the internal audio grid may be enormous.

Room for future improvement:

- Make it obvious when an audio didn't load due to the audio not existing.
- Find some way to collapse sparse audio grids into denser ones (when sparsity
is high)
- Fix column/row names
- Include hook for loading past audio (by step/timestamp? or index?)

@element tf-audio-grid
-->
<dom-module id="tf-audio-grid">
  <template>
    <style include="scrollbar-style"></style>
    <div id="fullContainer" class="container scrollbar">
      <div id="topRow" class="container">
        <div class="noshrink" id="paddingCell"></div>
        <template
          is="dom-repeat"
          items="[[runs]]"
          as="run"
        >
        <div class="run-name-cell noshrink">
          <span>[[run]]</span>
        </div>
      </template>
      </div>
      <div id="bottomContainer" class="container">
        <template
          is="dom-repeat"
          items="[[tags]]"
          as="tag"
        >
          <div class="audio-row container noshrink">
            <div class="tag-name-cell noshrink">
              <span class="tag-name">[[tag]]</span>
            </div>
            <template
              is="dom-repeat"
              items="[[runs]]"
              as="run"
            >
              <div class="audio-cell noshrink">
                <template is="dom-if" if="[[_exists(run, tag, runToAudio.*)]]">
                  <tf-audio-loader
                    id="loader"
                    run="[[run]]"
                    tag="[[tag]]"
                    audio-generator="[[audioGenerator]]"
                  >
                  </tf-audio-loader>
                </template>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
    <style>
      :host {
        display: block;
        height: 100%;
      }
      .container {
        display: flex;
        flex-wrap: nowrap;
      }
      #fullContainer {
        width: 100%;
        height: 100%;
        flex-direction: column;
        padding-top: 20px;
        overflow: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      #topRow {
        flex-direction: row;
      }
      #bottomContainer {
        flex-direction: column;
        height: 100%;
        width: 100%;
      }
      .audio-row {
        flex-direction: row;
        padding-top: 5px;
      }
      .audio-cell {
        width: 300px;
        height: 30px;
        border: 1px solid black;
      }
      .tag-name-cell {
        width: 300px;
        height: 30px;
        display:flex;
        flex-direction: column;
        justify-content: center;
      }
      .tag-name {
        word-wrap: break-word;
        text-align: center;
        white-space: nowrap;
      }
      .run-name-cell {
        width: 300px;
        height: 30px;
        text-align: center;
      }
      .noshrink {
        flex-shrink: 0;
      }
      #paddingCell {
        width: 300px;
        height: 30px;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-audio-grid",
      properties: {
        runToAudio: Object,
        tags: Array,
        runs: Array,
        audioGenerator: Function,
      },
      _exists: function (run, tag) {
        return this.runToAudio[run].indexOf(tag) !== -1;
      },
    });
  </script>
</dom-module>
